<template>
  <div>
    <div>
      <van-nav-bar style="background: #d12d1a;" class="fh" @click-left="$router.back()" title="修改密码" left-text="返回"
        left-arrow />
    </div>
    <div>
      <van-form @submit="onSubmit">
        <van-field v-model="oldPassword" name="oldPassword" label="老密码" placeholder="请输入老密码"
          :rules="[{ required: true, message: '请填写以前的密码' }, { validator: (val) => /^\w{6,12}$/.test(val), message: '请输入6-12位的的密码格式' }]" />
        <van-field v-model="newPassword" type="password" name="newPassword" label="新密码" placeholder="请输入新的密码"
          :rules="[{ required: true, message: '请输入新的密码' }, { validator: (val) => /^\w{6,12}$/.test(val), message: '请输入6-12位的的密码格式' }]" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
import { xgmmjk } from '@/api/xgmm.js'
import { Dialog } from 'vant'
export default {
  data() {
    return {
      oldPassword: '',
      newPassword: '',
    };
  },
  computed: {
    uid() {
      return this.$store.state.mkhuser.uid
    }
  },
  mounted() {
    console.log(this.uid)
  },
  methods: {
    onSubmit(values) {
      console.log('submit', values);
      console.log(values)

      let { oldPassword, newPassword } = values

      Dialog.confirm({
        message: '您确定要修改密码吗？',
      })
        .then(() => {

          xgmmjk({
            oldPassword: oldPassword,
            newPassword: newPassword,
            uid: this.uid
          }).then((res) => {
            console.log(res)
            if (res.code == 0) {
              this.$toast(res.msg)
              localStorage.clear();
              this.$store.commit('mkhuser/TCDL')
              setTimeout(() => {
                this.$router.push('dlu')
              }, 500)
            } else {
              this.$toast(res.msg)
            }
          })

        })
        .catch(() => {
          // on cancel
        });




    },
  },
};
</script>

<style scoped>
.input:-internal-autofill-selected {
  background-color: none;
}

::v-deep .van-ellipsis {
  color: #FFB619;
}

::v-deep .van-nav-bar__text {
  color: #FFB619;
}

::v-deep .van-icon-arrow-left {
  color: #FFB619;
}

::v-deep .van-button--info {
  background: #d12d1a;
  border: 1px solid #d12d1a;
  color: #FFB619;
}

.fd {
  display: flex;
  justify-content: space-between;
}
</style>